<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询所有学生信息 - 学生信息管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        gray: {
                            50: '#F5F7FA',
                            100: '#E5E6EB',
                            200: '#C9CDD4',
                            300: '#86909C',
                            400: '#4E5969',
                            500: '#272E3B',
                            600: '#1D2129',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .table-hover {
                @apply transition-colors duration-150 hover:bg-gray-50;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans min-h-screen">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-600">学生信息管理系统</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="text-gray-400 hover:text-primary transition-colors">首页</a>
                <a href="all-students.html" class="text-primary font-medium">全部学生</a>
                <a href="student-by-id.html" class="text-gray-400 hover:text-primary transition-colors">ID查询</a>
                <a href="students-by-status.html" class="text-gray-400 hover:text-primary transition-colors">状态查询</a>
                <a href="students-by-name.html" class="text-gray-400 hover:text-primary transition-colors">姓名查询</a>
                <a href="update-student.html" class="text-gray-400 hover:text-primary transition-colors">信息更新</a>
            </nav>
            <button class="md:hidden text-gray-500">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <div class="mb-8">
            <div class="flex items-center space-x-3 mb-2">
                <a href="index.html" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-home"></i>
                </a>
                <i class="fa fa-angle-right text-gray-300 text-xs"></i>
                <span class="text-gray-400">全部学生</span>
            </div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-600">查询所有学生信息</h2>
            <p class="text-gray-400">查看系统中的全部学生信息，支持基本筛选和排序</p>
        </div>

        <!-- 工具栏 -->
        <div class="bg-white rounded-xl p-6 card-shadow mb-8">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
                <div>
                    <h3 class="text-lg font-semibold text-gray-600">学生列表</h3>
                    <p class="text-sm text-gray-400" id="studentCount">-- 名学生</p>
                </div>
                <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
                    <div class="relative w-full sm:w-64">
                        <input 
                            type="text" 
                            id="quickSearch" 
                            placeholder="快速搜索..." 
                            class="w-full px-4 py-2 pl-10 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none"
                        >
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-300"></i>
                    </div>
                    <div class="flex gap-2">
                        <select id="sortBy" class="px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none">
                            <option value="studentId">按学号排序</option>
                            <option value="name">按姓名排序</option>
                            <option value="createTime">按创建时间排序</option>
                        </select>
                        <select id="sortOrder" class="px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap gap-3">
                <button id="filterAll" class="px-4 py-1.5 bg-primary text-white rounded-full text-sm font-medium btn-hover">
                    全部
                </button>
                <button id="filterNormal" class="px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors">
                    正常状态
                </button>
                <button id="filterDeleted" class="px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors">
                    已删除
                </button>
                <button id="refreshBtn" class="px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors ml-auto">
                    <i class="fa fa-refresh mr-1"></i>刷新
                </button>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="bg-white rounded-xl overflow-hidden card-shadow mb-8">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-100">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">学生ID</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">姓名</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">班级</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">专业</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">性别</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">电话</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">邮箱</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">状态</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody id="studentsTableBody" class="bg-white divide-y divide-gray-50">
                        <!-- 数据将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 空状态 -->
            <div id="emptyState" class="py-20 text-center hidden">
                <i class="fa fa-database text-gray-200 text-5xl mb-4"></i>
                <p class="text-gray-400">暂无学生数据</p>
                <button id="retryBtn" class="mt-4 px-4 py-2 bg-primary text-white rounded-lg font-medium btn-hover">
                    重新加载
                </button>
            </div>
        </div>

        <!-- 分页控件 -->
        <div class="flex justify-between items-center bg-white rounded-xl p-4 card-shadow">
            <div class="text-sm text-gray-400">
                显示 <span id="startRange">0</span> - <span id="endRange">0</span> 条，共 <span id="totalItems">0</span> 条
            </div>
            <div class="flex items-center space-x-2">
                <button id="prevPage" class="px-3 py-1 border border-gray-200 rounded text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fa fa-angle-left"></i>
                </button>
                <div id="paginationNumbers" class="flex items-center space-x-1">
                    <!-- 页码将通过JavaScript动态填充 -->
                </div>
                <button id="nextPage" class="px-3 py-1 border border-gray-200 rounded text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fa fa-angle-right"></i>
                </button>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white mt-12 py-6 border-t border-gray-100">
        <div class="container mx-auto px-4 text-center text-gray-400 text-sm">
            <p>© 2023 学生信息管理系统 - 版权所有</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let allStudents = [];
            let filteredStudents = [];
            let currentPage = 1;
            const itemsPerPage = 10;
            let currentFilter = 'all';

            // 初始化页面
            loadAllStudents();

            // 事件监听器
            document.getElementById('refreshBtn').addEventListener('click', loadAllStudents);
            document.getElementById('retryBtn').addEventListener('click', loadAllStudents);
            document.getElementById('quickSearch').addEventListener('input', handleQuickSearch);
            document.getElementById('sortBy').addEventListener('change', handleSort);
            document.getElementById('sortOrder').addEventListener('change', handleSort);
            document.getElementById('filterAll').addEventListener('click', () => applyFilter('all'));
            document.getElementById('filterNormal').addEventListener('click', () => applyFilter('normal'));
            document.getElementById('filterDeleted').addEventListener('click', () => applyFilter('deleted'));
            document.getElementById('prevPage').addEventListener('click', goToPreviousPage);
            document.getElementById('nextPage').addEventListener('click', goToNextPage);

            // 加载所有学生数据
            function loadAllStudents() {
                // 显示加载状态
                document.getElementById('studentsTableBody').innerHTML = `
                    <tr>
                        <td colspan="9" class="px-4 py-8 text-center">
                            <div class="inline-block animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-primary mr-2"></div>
                            <span class="text-gray-400">正在加载学生数据...</span>
                        </td>
                    </tr>
                `;
                document.getElementById('emptyState').classList.add('hidden');
                
                fetch('/getAllStudents')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! Status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        allStudents = data || [];
                        applyFilter(currentFilter);
                    })
                    .catch(error => {
                        console.error('获取学生数据失败:', error);
                        document.getElementById('studentsTableBody').innerHTML = '';
                        document.getElementById('emptyState').classList.remove('hidden');
                        updatePaginationInfo([]);
                    });
            }

            // 应用筛选
            function applyFilter(filterType) {
                currentFilter = filterType;
                currentPage = 1;
                
                // 更新筛选按钮样式
                document.getElementById('filterAll').className = filterType === 'all' 
                    ? 'px-4 py-1.5 bg-primary text-white rounded-full text-sm font-medium btn-hover' 
                    : 'px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors';
                
                document.getElementById('filterNormal').className = filterType === 'normal' 
                    ? 'px-4 py-1.5 bg-primary text-white rounded-full text-sm font-medium btn-hover' 
                    : 'px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors';
                
                document.getElementById('filterDeleted').className = filterType === 'deleted' 
                    ? 'px-4 py-1.5 bg-primary text-white rounded-full text-sm font-medium btn-hover' 
                    : 'px-4 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors';
                
                // 应用筛选
                if (filterType === 'all') {
                    filteredStudents = [...allStudents];
                } else if (filterType === 'normal') {
                    filteredStudents = allStudents.filter(student => student.status === 1);
                } else if (filterType === 'deleted') {
                    filteredStudents = allStudents.filter(student => student.status === 0);
                }
                
                // 应用排序
                handleSort();
            }

            // 快速搜索
            function handleQuickSearch() {
                const searchTerm = document.getElementById('quickSearch').value.toLowerCase().trim();
                
                if (!searchTerm) {
                    applyFilter(currentFilter);
                    return;
                }
                
                // 基于当前筛选结果进行搜索
                let searchResults = filteredStudents.filter(student => 
                    student.studentId.toLowerCase().includes(searchTerm) ||
                    student.name.toLowerCase().includes(searchTerm) ||
                    (student.className && student.className.toLowerCase().includes(searchTerm)) ||
                    (student.major && student.major.toLowerCase().includes(searchTerm)) ||
                    (student.phone && student.phone.includes(searchTerm))
                );
                
                filteredStudents = searchResults;
                currentPage = 1;
                renderTable();
                renderPagination();
            }

            // 处理排序
            function handleSort() {
                const sortBy = document.getElementById('sortBy').value;
                const sortOrder = document.getElementById('sortOrder').value;
                
                filteredStudents.sort((a, b) => {
                    let valueA = a[sortBy];
                    let valueB = b[sortBy];
                    
                    // 处理空值
                    if (valueA == null || valueA === undefined || valueA === '') valueA = '';
                    if (valueB == null || valueB === undefined || valueB === '') valueB = '';
                    
                    // 字符串比较
                    if (typeof valueA === 'string') {
                        valueA = valueA.toLowerCase();
                        valueB = valueB.toLowerCase();
                    }
                    
                    // 日期比较
                    if (sortBy === 'createTime') {
                        valueA = new Date(valueA).getTime();
                        valueB = new Date(valueB).getTime();
                    }
                    
                    if (valueA < valueB) return sortOrder === 'asc' ? -1 : 1;
                    if (valueA > valueB) return sortOrder === 'asc' ? 1 : -1;
                    return 0;
                });
                
                renderTable();
                renderPagination();
            }

            // 渲染表格数据
            function renderTable() {
                const tableBody = document.getElementById('studentsTableBody');
                const startIndex = (currentPage - 1) * itemsPerPage;
                const endIndex = startIndex + itemsPerPage;
                const currentPageStudents = filteredStudents.slice(startIndex, endIndex);
                
                if (currentPageStudents.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="9" class="px-4 py-12 text-center">
                                <i class="fa fa-search text-gray-200 text-4xl mb-3"></i>
                                <p class="text-gray-400">暂无符合条件的学生信息</p>
                            </td>
                        </tr>
                    `;
                } else {
                    tableBody.innerHTML = currentPageStudents.map(student => `
                        <tr class="table-hover">
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.studentId}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">${student.name || '-'}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.className || '-'}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.major || '-'}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.gender || '-'}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.phone || '-'}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.email || '-'}</td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${student.status === 1 ? 'bg-success/10 text-success' : 'bg-danger/10 text-danger'}">
                                    ${student.status === 1 ? '正常' : '已删除'}
                                </span>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                <div class="flex items-center space-x-2">
                                    <a href="student-by-id.html?id=${student.studentId}" class="text-primary hover:text-primary/80">
                                        <i class="fa fa-eye mr-1"></i>查看
                                    </a>
                                    <a href="update-student.html?id=${student.studentId}" class="text-warning hover:text-warning/80">
                                        <i class="fa fa-edit mr-1"></i>编辑
                                    </a>
                                </div>
                            </td>
                        </tr>
                    `).join('');
                }
                
                updatePaginationInfo(filteredStudents);
            }

            // 渲染分页
            function renderPagination() {
                const totalPages = Math.ceil(filteredStudents.length / itemsPerPage);
                const paginationNumbers = document.getElementById('paginationNumbers');
                
                paginationNumbers.innerHTML = '';
                
                // 显示最多5个页码
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(totalPages, startPage + 4);
                
                if (endPage - startPage < 4) {
                    startPage = Math.max(1, endPage - 4);
                }
                
                for (let i = startPage; i <= endPage; i++) {
                    const pageButton = document.createElement('button');
                    pageButton.className = i === currentPage 
                        ? 'px-3 py-1 bg-primary text-white rounded text-sm font-medium' 
                        : 'px-3 py-1 border border-gray-200 rounded text-sm text-gray-600 hover:bg-gray-50';
                    pageButton.textContent = i;
                    pageButton.addEventListener('click', () => goToPage(i));
                    paginationNumbers.appendChild(pageButton);
                }
                
                // 更新上一页/下一页按钮状态
                document.getElementById('prevPage').disabled = currentPage === 1;
                document.getElementById('nextPage').disabled = currentPage === totalPages;
            }

            // 跳转到指定页
            function goToPage(page) {
                currentPage = page;
                renderTable();
                renderPagination();
            }

            // 上一页
            function goToPreviousPage() {
                if (currentPage > 1) {
                    goToPage(currentPage - 1);
                }
            }

            // 下一页
            function goToNextPage() {
                const totalPages = Math.ceil(filteredStudents.length / itemsPerPage);
                if (currentPage < totalPages) {
                    goToPage(currentPage + 1);
                }
            }

            // 更新分页信息
            function updatePaginationInfo(data) {
                const totalItems = data.length;
                const startRange = totalItems > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0;
                const endRange = Math.min(currentPage * itemsPerPage, totalItems);
                
                document.getElementById('startRange').textContent = startRange;
                document.getElementById('endRange').textContent = endRange;
                document.getElementById('totalItems').textContent = totalItems;
                document.getElementById('studentCount').textContent = `${totalItems} 名学生`;
            }

            // 检查URL参数，支持从其他页面带参数跳转
            const urlParams = new URLSearchParams(window.location.search);
            const filterParam = urlParams.get('filter');
            if (filterParam) {
                if (['all', 'normal', 'deleted'].includes(filterParam)) {
                    applyFilter(filterParam);
                }
            }
        });
    </script>
</body>
</html>